<template>
  <div id="index">
    <dyd-dialog width="400px" ref="dialog" :title="(updates?'修改':'新增')+'试题'">
      <dyd-form ref="dydForm" label-width="80px" :ruleForm="ruleForm" :rules="rules" @submit="submit">
        <el-form-item label="试题" prop="name">
          <el-input v-model="ruleForm.name"  placeholder="试题"></el-input>
        </el-form-item>
        <el-form-item label="截止时间" prop="name">
          <el-date-picker
            v-model="ruleForm.time"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="试卷" prop="questionId">
          <el-select v-model="ruleForm.questionId" placeholder="请选择">
            <el-option
              v-for="item in questionList"
              :key="item.ids"
              :label="item.name"
              :value="item.ids">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="classId">
          <el-select v-model="ruleForm.classId" placeholder="请选择">
            <el-option
              v-for="item in classList"
              :key="item.ids"
              :label="item.name"
              :value="item.ids">
            </el-option>
          </el-select>
        </el-form-item>
      </dyd-form>
      <div style="float: right;display: block" >
        <el-button plain type="info"  @click="$refs.dydForm.resetForm();">清除</el-button>
        <el-button  type="primary" @click="$refs.dydForm.submitForm();">提交</el-button>
      </div>
      <div style="width: 100%;height: 40px"></div>
    </dyd-dialog>
    <div style="margin-bottom: 20px">
      <el-button   type="primary" round plain @click="updates=false;ruleForm=$JSP(form);$refs.dialog.openDia();">添加考试</el-button>
    </div>
    <dyd-table :data="tableData">
      <el-table-column type="expand" label="详情" width="50">
        <template slot-scope="scope" >
          <el-table v-if="scope.row.testList" :data="scope.row.testList">
            <el-table-column
              prop="time"
              label="答题时间 ">
              <template slot-scope="scopes">
                {{$Time(scopes.row.ids).getTime()}}
              </template>
            </el-table-column>
            <el-table-column
              prop="fraction"
              label="分数 ">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="答题人 ">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="ids"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="试题">
      </el-table-column>
      <el-table-column
        prop="className"
        label="班级名称">
      </el-table-column>
      <el-table-column
        prop="questionName"
        label="试卷名称">
      </el-table-column>
      <el-table-column
        width="50"
        prop="fraction"
        label="总分">
      </el-table-column>
      <el-table-column
        prop="time"
        label="截止日期">
        <template slot-scope="scope">
          {{$Time(scope.row.time).getTime()}}
        </template>
      </el-table-column>
      <el-table-column
        label="答题进度">
        <template slot-scope="scope">
          <el-progress :percentage="((scope.row.testList.length/scope.row.classNum)*100)"></el-progress>
        </template>
      </el-table-column>
      <el-table-column
        width="130"
        label="操作">
        <template slot-scope="scope">
          <dydLink  type="up" @click.native="updates=true;ruleForm=$JSP(scope.row);$refs.dialog.openDia();index=scope.$index">修改</dydLink>
          <dydLink  type="del"   @click.native="deleteAdmin(scope.row,scope.$index)">删除</dydLink>
        </template>
      </el-table-column>
    </dyd-table>
  </div>
</template>

<script>
  export default {
    name: "index",
    props: [''],
    data() {
      return {
        updates:false,
        form:{
          questionId: null,
          classId: null,
          userId:this.$adminInfo().ids,
          time:Date.now()
        },
        ruleForm:{},
        rules:{
          questionId:[
            {  required: true, message: '请选择试卷', trigger: 'blur'  },
          ],
          classId:[
            {  required: true, message: '请选择班级', trigger: 'blur'  },
          ],
          time:[
            {  required: true, message: '请选择考试时间', trigger: 'blur'  },
          ],
          name:[
            {  required: true, message: '请输入考试标题', trigger: 'blur'  },
          ]
        },
        tableData:[],
        classList:[],
        questionList:[]
      }
    },
    methods: {
      success(path){
        this.ruleForm.img=path
      },
      submit(){
        let cnt=this.$JSP(this.ruleForm)
        if(!this.updates){
          cnt.ids=Date.now()
          this.$api.add('test',cnt,res=>{
            this.getTest()
            this.$refs.dialog.closeDia()
          })

        }else{
          delete cnt.classId1
          delete cnt.className
          delete cnt.questionName
          delete cnt.testList
          delete cnt.classNum
          delete cnt.fraction
          this.$api.up('test',cnt,res=>{
            this.getTest()
            this.$refs.dialog.closeDia()
          })
        }
      },
      deleteAdmin(row,index){
        this.$api.del('test',{ids:row.ids},res=>{
          this.tableData.splice(index,1)
        })
      },
      async getClass(){
        this.$api.get('classes',{$orderBY: {col:'ids'}},res=>{
          this.classList=res
        })
      },
      async getTest(){
        let cnt ={
          $orderBY: {col:'ids'},
          $where:{userId:this.$adminInfo().ids},
          $link:[
            {
              table:'classes',
              left:'classId',
              right:'classId1',
              where:'ids as classId1,name as className'
            },{
              table:'question',
              left:'questionId',
              right:'questionId',
              where:'ids as questionId,name as questionName,fraction'
            },
          ]
        }
        if(this.$adminInfo().ids == 1) delete cnt.$where
        this.$api.get('test',cnt,res=>{
          res.map(item=>{
            this.$api.get('test_info',{
              $where:{ testId:item.ids },
              $link:{
                table:'admin',
                left:'userId',
                right:'userId',
                where:'ids as userId,names as userName'
              }
            },r=>{
              this.$set(item,'testList',r)
            })
            this.$api.get('admin',{$where:{classId:item.classId}},r=>{
              this.$set(item,'classNum',r.length)
            })
          })
          this.tableData=res
        })
      },
      async getQuestion(){
        let cnt = {
          $orderBY: {col:'ids'},
        }
        this.$api.get('question',cnt,res=>{
          this.questionList = res

        })
      }

    },
    mounted() {
      this.getClass()
      this.getTest()
      this.getQuestion()
    },
    created() {

    },
    components: {},
    watch: {},
  }
</script>

<style scoped lang='scss'>
  #index {

  }
</style>
